<template>
	<view class="container" style="background-color: white;">
		<!-- 导航栏 -->
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			titleStyle="{height: '52px'}" title="样品管理" @clickLeft="back">
			<block slot="right">
				<view class="city">
					<uni-icons type="scan" size="25" color="white" @click="doScan"></uni-icons>
					<uni-icons type="plus" size="25" color="white" style="padding-left: 12px;"
						@click="navTo('/pages/sample/create')"></uni-icons>
				</view>
			</block>
		</uni-nav-bar>

		<!-- 顶部tab -->
		<u-tabs :list="tabs" :lineWidth="52" :itemStyle="{height: '52px',width:'50%',padding:'0 0'}"></u-tabs>
		<u-line :dashed="false" style="margin: -2px;"></u-line>

		<!-- 搜索栏 -->
		<u-search v-model="search" :show-action="false" :animation="false" inputAlign="center" @change="loadmore"
			style="padding: 10px;">
		</u-search>
		<u-line :dashed="false" style="margin: -2px;"></u-line>

		<!-- tags -->
		<view class="u-page__tag-item" v-for="(item, index) in tags" :key="index">
			<u-tag :name="index" :text="item.text" :plain="!item.checked" shape="circle" :style="item.style"
				@click="radioClick"></u-tag>
		</view>

		<u-line :dashed="false" style="margin: -2px;"></u-line>

		<!-- 列表 -->
		<scroll-view class="scroll-list" scroll-y="true">
			<view class="uni-sample-list" v-for="(sample, index) in sampleList" :key="index">
				<view class="uni-sample-list-cell" @click="sampleClick(sample)">
					<view class="uni-sample-list-body">
						<view class="uni-sample-list-item-content">
							<view class=""><text>{{sample.sender}}</text></view>
							<text class="uni-sample-list-item-content-step">
								<text><span>{{sample.name}} {{sample.code}} {{ sample.warehouserName }}</span></text>
							</text>
						</view>
						<view class="uni-sample-list-item-extra"><text
								class="uni-sample-list-item-extra-text"><span>></span></text></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-action-sheet :actions="actions" @close="closeActionSheet" :show="showActionSheet" cancelText="取消"
			@select="selectClick"></u-action-sheet>
		<u-modal :show="showDeleteModal" title="确认删除" :showCancelButton="true"
			@cancel="()=>showDeleteModal=!showDeleteModal" :content="'删除后,该样品所有相关信息均将被删除,是否继续?'"
			@confirm="deleteConfirm" :asyncClose="false"></u-modal>

		<u-modal :show="showFallbackApproveModal" title="确认删除" :showCancelButton="true"
			@cancel="()=>showDeleteModal=!showDeleteModal" :content="'删除后,该样品所有相关信息均将被删除,是否继续?'"
			@confirm="deleteConfirm" :asyncClose="false"></u-modal>

		<u-modal :show="showQrCodeModal" title="选择处理方式" :showCancelButton="true"
			@cancel="navTo('/pages/sample/my/delegate?id='+selectedSample.id)" :confirmText="'样品归还'"
			:cancelText="'继续流转'" @confirm="navTo('/pages/sample/my/sendback?id='+selectedSample.id)"
			:asyncClose="false"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actions: [{
						name: '样品修改'
					},
					{
						name: '查看详情'
					},
					{
						name: '删除样品'
					}
				],
				showFallbackApproveModal: false,
				showDeleteModal: false,
				showQrCodeModal: false,
				showActionSheet: false,
				showConfirmModal: false,
				selectedSample: {},
				tabs: [{
					name: '明细数据',
				}, {
					name: '统计报表',
					disabled: true
				}],
				actionRoutes: {
					'样品领取': {
						url: '/pages/sample/recieve?id='
					},
					'样品修改': {
						url: '/pages/sample/modify?id='
					},
					'查看详情': {
						url: '/pages/sample/detail?id='
					},
					'继续流转': {
						url: '/pages/sample/delegate?id='
					},
					'归还样品': {
						url: '/pages/sample/sendback?id='
					},
					'退样': {
						url: '/pages/sample/fallback2Recieve?id='
					},
					'确认归还': {
						url: '/pages/sample/sendbackConfirm?id='
					},
					'处置样品': {
						url: '/pages/sample/handle?id='
					},
					'审核': {
						url: '/pages/sample/handleConfirm?id='
					},
					'退审': {
						url: '/pages/sample/fallback2Handle?id='
					},
					'删除样品': {
						modal: 'showDeleteModal'
					}
				},
				tags: [{
						text: "待领取",
						checked: true,
						style: "float:left; margin: 10px 10px 10px 10px;",
						actions: [{
								name: '样品修改'
							},
							{
								name: '查看详情'
							},
							{
								name: '删除样品'
							}
						]
					},
					{
						text: "待归还",
						checked: false,
						style: "float:left; margin: 10px 0px 10px 0px;",
						actions: [{
							name: '查看详情'
						}]
					},
					{
						text: "待入库确认",
						checked: false,
						style: "float:left; margin: 10px 0px 10px 10px;",
						actions: [{
								name: '确认归还'
							},
							{
								name: '查看详情'
							}
						]
					},
					{
						text: "待处置",
						checked: false,
						style: "float:left; margin: 10px 0px 10px 10px;",
						actions: [{
								name: '处置样品'
							},
							{
								name: '查看详情'
							}
						]
					},
					{
						text: "待审核",
						checked: false,
						style: "float:left; margin: 10px 0px 10px 10px;",
						actions: [{
								name: '审核'
							},
							{
								name: '退审'
							},
							{
								name: '查看详情'
							}
						]
					},
				],
				selectedTag: '待领取',
				curNow: 0,
				sampleList: [],
				search: "",
			}
		},
		onLoad() {
			var this_ = this;
			uni.getStorage({
				key: 'sampleManageSelectedTagIndex',
				success: function(res) {
					this_.radioClick(res.data);
				},
				fail: function() {
					this_.loadmore();
				}
			});
		},
		methods: {
			doScan() {
				var this_ = this;
				let scanCode = uni.scanCode.bind(uni)
				// #ifdef H5
				scanCode = chm.scanCode.bind(chm)
				// #endif
				scanCode({
					onlyFromCamera: true,
					success: function(scan_res) {
						console.log('条码类型：' + scan_res.scanType);
						console.log('条码内容：' + scan_res.result);

						var id = scan_res.result;
						this_.$u.api.isMySampleCheck(id).then(res => {
							if (res.code != 200) {
								this_.$u.toast('您无权处理该样品数据,请确认后扫码.');
								return;
							}
							if (!res.data) {
								this_.$u.toast('无法查询到ID为' + id + '的样品数据.');
								return;
							}
							if (!res.data) return;
							let sample = res.data;
							this_.selectedSample = res.data;
							// if (sample.step == '样品入库') {
							// 	this_.navTo('/pages/sample/my/recieve?id=' + sample.id);
							// } else if (sample.step == '样品检验') {
							// 	this_.showQrCodeModal = !this_.showQrCodeModal;
							// } else if (sample.step == '归还入库') {
							// 	this_.navTo('/pages/sample/sendbackConfirm?id=' + sample.id);
							// } else if (sample.step == '归库确认') {
							// 	this_.navTo('/pages/sample/handle?id=' + sample.id);
							// } else if (sample.step == '处置申请') {
							// 	this_.navTo('/pages/sample/handlerConfirm?id=' + sample.id);
							// } else {
							// 	this_.navTo('/pages/sample/detail?id=' + sample.id);
							// }
							// 现在只需要进详情
							this_.navTo('/pages/sample/detail?id=' + sample.id);
						});
					},
				})

				// uni.scanCode({
				// 	success: function (id) {
				// 		this_.$u.api.isMySampleCheck(id).then(res=>{
				// 			this_.selectedSample = res.data;
				// 			if(res.step == '样品入库'){
				// 				uni.navigateTo('/pages/sample/recieve?id='+res);
				// 			}else if(res.step == '继续流转'){

				// 			}
				// 		});
				// 	}
				// });
			},
			scanNavto(id) {
				this_.$u.api.isMySampleCheck(id).then(res => {
					if (res.code != 200) {
						this_.$u.toast('您无权处理该样品数据,请确认后扫码.');
						return;
					}
					if (!res.data) {
						this_.$u.toast('无法查询到ID为' + id + '的样品数据.');
						return;
					}
					let sample = res.data;
					this_.selectedSample = res.data;
					// if (sample.step == '样品入库') {
					// 	this_.navTo('/pages/sample/my/recieve?id=' + sample.id);
					// } else if (sample.step == '样品检验') {
					// 	this_.showQrCodeModal = !this_.showQrCodeModal;
					// } else if (sample.step == '归还入库') {
					// 	this_.navTo('/pages/sample/sendbackConfirm?id=' + sample.id);
					// } else if (sample.step == '归库确认') {
					// 	this_.navTo('/pages/sample/handle?id=' + sample.id);
					// } else if (sample.step == '处置申请') {
					// 	this_.navTo('/pages/sample/handlerConfirm?id=' + sample.id);
					// } else {
					// 	this_.navTo('/pages/sample/detail?id=' + sample.id);
					// }
					// 现在只需要进详情
					this_.navTo('/pages/sample/detail?id=' + sample.id);
				});
			},
			radioClick(i) {
				var this_ = this;
				this.tags.map((item, index) => {
					item.checked = index === i ? true : false
					if (item.checked) {
						this_.selectedTag = item.text;
						//从tags数据中读取action内容，实现切换tag，action切换
						this_.actions = item.actions;
						uni.setStorage({
							key: 'sampleManageSelectedTagIndex',
							data: i
						});
					}
				})
				this_.loadmore();
			},
			deleteConfirm() {
				var this_ = this;
				this.$u.api.deleteSample(this_.selectedSample.id).then(res => {
					this_.$u.toast('删除成功');
					this_.showDeleteModal = !this_.showDeleteModal;
					this_.loadmore();
				});
			},
			closeModal() {
				this.showConfirmModal = false;
			},
			//确认领取
			confirm() {
				var this_ = this; //存储this
				this.$u.api.forwardSample(this_.selectedSample).then(res => {
					this.$u.toast('领取成功');
					uni.navigateBack({
						delta: 1
					})
				});
			},
			closeActionSheet() {
				this.showActionSheet = false;
			},
			sampleClick(sample) {
				this.selectedSample = sample;
				this.showActionSheet = true;
			},
			selectClick(index) {
				//跳转到具体页面
				var route = this.actionRoutes[index.name];
				if (route.url) {
					this.navTo(route.url + this.selectedSample.id);
				} else if (route.modal) {
					this[route.modal + ''] = !this[route.modal + ''];
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				var this_ = this;
				var params = {
					params: {
						status: this_.selectedTag,
						search: this_.search,
						pageNum: 1,
						pageSize: 100
					}
				}
				// 和PC保持一致
				this_.$u.api.querySampleListByStep(params).then(res => {
					this_.sampleList = res.rows;
				});
				// if (this_.selectedTag == '待领取') {
				// 	this_.$u.api.queryUnReceiveSampleList(params).then(res => {
				// 		this_.sampleList = res.rows;
				// 	});
				// } else {
				// 	this_.$u.api.querySampleListByStep(params).then(res => {
				// 		this_.sampleList = res.rows;
				// 	});
				// }
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.uni-title {
		font-size: 30rpx;
		color: #333333;
		padding: 10px;
		background: #fff;
		border-top: 1px solid #ededed;
		margin-top: 20rpx;
	}

	.uni-sample-list-item-content-step {
		margin-top: 2px;
		color: #999;
		font-size: 13px;
		overflow: hidden;
		line-height: 18px;
	}

	.uni-sample-list-item-extra {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.uni-sample-list-item-extra-text {
		color: #999;
		font-size: 18px;
	}

	.uni-sample-list-body {
		position: relative;
		display: flex;
		flex-direction: row;
		padding: 12px 15px;
		padding-left: 15px;
		flex: 1;
		overflow: hidden;
	}

	.uni-sample-list-item-content {
		display: flex;
		padding-right: 8px;
		flex: 1;
		color: #3b4144;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}

	.uni-sample-list-text-top {
		height: 40rpx;
		overflow: hidden;
		width: 100%;
		line-height: 40rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.uni-sample-list-text-bottom {
		width: 100%;
		line-height: 28px;
		font-size: 26rpx;
		color: #666666;

		span {
			margin-right: 10rpx;
		}
	}
</style>
